<!--
 * @Author: windys
 * @Description: 详情
 * @Date: 2022-03-08 11:11:23
-->
<template>
  <div class="detail_page">
    <div class="title">{{ data.courseName }}</div>
    <div class="desc">
      <van-rate size="14" v-model="value" />
      <span
        >{{ data.chapterRsps ? data.chapterRsps.length : 0 }}节课 ·
        {{ data.viewNum }}观看 · {{ data.commentNum }}评论数</span
      >
    </div>
    <div class="price">
      <span style="color: #ff9100">{{
        data.price ? data.price + "金石" : "免费"
      }}</span>
      <span style="color: #f84242">
        <i class="iconfont icon-VIP1"></i>
        {{ data.vipPrice ? data.vipPrice + "金石" : "VIP免费" }}</span
      >
    </div>
    <div class="sp">
      <van-image
        :src="data.headUrl"
        round
        width="25"
        height="25"
        fit="contain"
      />
      <div class="detail">
        <span>{{ data.spcolumnName }}</span>
        <van-icon
          class="chat"
          name="chat"
          size="24"
          color="#ff8100"
          @click="handleOpen"
        />
        <van-icon
          class="vip-card"
          name="vip-card"
          size="24"
          color="#f92d2d"
          @click="handleOpenVip"
        />
      </div>
    </div>
    <div class="courseIntroduction" v-html="data.courseIntroduction"></div>
  </div>

  <CommentCard ref="CommentCard" />
  <OpenVip ref="OpenVip" />
</template>


<script >
import { defineComponent, getCurrentInstance, ref } from "vue";
import CommentCard from "./CommentCard.vue";
import OpenVip from "@/pages/my/comps/openVip.vue";
import { Dialog, Notify, Toast } from "vant";
export default defineComponent({
  components: {
    CommentCard,
    OpenVip,
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup() {
    const instance = getCurrentInstance().appContext.config.globalProperties

    const CommentCard = ref();
    const OpenVip = ref();
    const handleOpen = () => {
      CommentCard.value.show = true;
    };
    const handleOpenVip = () => {
      if(instance.$user.vipStatus>0){
        Toast.fail('您已是会员')
        return 
      }
      Dialog.confirm({
        title: "提示",
        message:
          "确认开通财乎VIP?",
      })
        .then(() => {
          OpenVip.value.show = true;
        })
        .catch(() => {
          // on cancel
        });
    };
    return {
      value: 4.5,
      OpenVip,
      CommentCard,
      handleOpen,
      handleOpenVip,
    };
  },
});
</script>



<style lang="scss" scoped>
.detail_page {
  padding: 10px;
  background: #fff;
  .title {
    font-size: 16px;
    padding: 10px 0;
  }
  .desc {
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
      font-size: 12px;
      color: #797878;
      margin-top: 2px;
    }
  }
  .price {
    font-size: 12px;
    margin-top: 10px;
    span {
      margin-right: 10px;
    }
    i {
      position: relative;
      top: 2px;
    }
  }
  .sp {
    height: 25px;
    line-height: 25px;
    display: flex;
    align-items: center;
    font-size: 12px;
    margin: 20px 0;
    span {
      margin-left: 10px;
    }
    .detail {
      width: 100%;
      position: relative;
      .chat {
        position: absolute;
        right: 60px;
        top: 2px;
      }
      .vip-card {
        position: absolute;
        right: 10px;
        top: 2px;
      }
    }
  }
  .courseIntroduction {
    font-size: 14px;
    text-indent: 20px;
    color: #999696;
  }
}
</style>
